<script lang="ts" setup>
import { DUTY_STATUS_OPTIONS } from '@/config/enum-map';

import { injectState } from '../state';

defineOptions({ name: 'Filters' });

const {
  filter,
  page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
  filter.value = { ...toRaw(data.value) };
};

const reset = () => {
  data.value = { ...initial };
};
</script>

<template>
  <el-form class="filter-form" inline :model="data" :disabled="isLoading">
    <el-form-item label="所在部门" prop="所在部门">
      <el-select-v2
        v-model="data.deptId"
        clearable
        class="w-240px!"
        :options="[]"
        placeholder="请选择所在部门"
      />
    </el-form-item>
    <el-form-item label="员工职务" prop="员工职务">
      <el-select-v2
        v-model="data.job"
        clearable
        class="w-240px!"
        :options="[]"
        placeholder="请选择员工职务"
      />
    </el-form-item>
    <el-form-item label="在职状态" prop="在职状态">
      <el-select-v2
        v-model="data.dutyStatus"
        clearable
        class="w-240px!"
        :options="DUTY_STATUS_OPTIONS"
        placeholder="请选择在职状态"
      />
    </el-form-item>
    <el-form-item>
      <el-input placeholder="搜索" class="w-240px!">
        <template #prefix>
          <el-icon class="i-custom:search" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-divider direction="vertical" h="32px!" m="r-22px!" />
      <el-button type="primary" :loading="isLoading" @click="search">
        <template #icon>
          <el-icon class="i-custom:search" />
        </template>
        查询
      </el-button>
      <el-button @click="reset">
        <template #icon>
          <el-icon class="i-custom:reset" />
        </template>
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>
